<template>
	<view class="listBody">
		<view class="list" v-for="(item,i) of daindongche" :key="i">
			<view class="title">
				{{item.productList[0].sheyingshixingming}}
			</view>
			<view class="ptTxt">
				<text>价格：</text>
				<text style="margin-left: 0.1rem;"> {{item.productList[0].jiage}}</text>
			</view>
			<view class="tsTxt">
				<text>设备：</text>
				<text style="margin-left: 0.1rem;color: red;"> {{item.productList[0].beizhu}}</text>
			</view>
			<!-- 新增的图片展示部分 -->
			<view class="imageContainer">
				<image class="image" :src="`http://localhost:8888${item.productList[0].touxiang}`" mode="aspectFill" />
			</view>
			<view style="height: 1rem;"></view>
		</view>
	</view>
</template>


<script>
	import {
		diandongche,
		qxxiao
	} from "@/request/API/xinwentongzhi/index";
	import uploadFile from '@/components/uploadFile.vue'
	export default {
		components: {
			uploadFile
		},
		data() {
			return {
				daindongche: []
			};
		},
		onLoad() {
			this.obj = uni.getStorageSync("user");
			this.xingming = this.obj.yonghuming
		},
		onShow() {
			this.diandongche()
		},
		methods: {
			qxbm(row) {
				console.log("?>")
				uni.showModal({
					title: '取消报名',
					content: '确认取消报名吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确认
							console.log('用户确认取消报名');
							// 在这里添加取消报名的逻辑
							row.issh = '已取消'
							qxxiao(row).then(res => {
								this.diandongche()
							})
						} else if (res.cancel) {
							// 用户点击了取消
							console.log('用户取消了取消报名');
						}
					}
				});
			},
			diandongche() {
				diandongche({
					userId: this.obj.id
				}).then(res => {
					this.daindongche = res.data;
					console.log(this.daindongche)
				})
			}
		}
	};
</script>
<style lang="scss">
	.listBody {
		width: 100%;
		height: 100vh;
		background: #e2dddd;
	}

	.list {
		width: 95%;
		margin: 1rem auto;
		border-radius: 0.3rem;
		background: #ffffff;
		position: relative;
		display: flex;
		flex-direction: column;
		/* 修改为纵向排列 */
		justify-content: flex-start;
		align-items: flex-start;
	}

	.imageContainer {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 0.5rem;
	}

	.image {
		width: 100%;
		height: 5rem;
		border-radius: 0.2rem;
		object-fit: cover;
	}

	.title {
		width: 100%;
		margin: 0.5rem 0;
		font-weight: 800;
		word-wrap: break-word;
		    padding: 0.5rem;
		/* 确保文本能够换行 */
		line-height: 1.5;
		/* 调整行高，提升可读性 */
		text-align: left;
		/* 对齐文本 */
		border-bottom: 0.1rem solid #c1b9b9;
	}

	.ptTxt,
	.tsTxt {
		width: 90%;
		height: auto;
		margin: 0.5rem auto;
		display: flex;
		align-items: center;
		word-wrap: break-word;
		/* 确保文本能够换行 */
		line-height: 1.5;
	}

	.tsTxt {
		color: #ff573a;
	}
</style>